<!DOCTYPE html>
<html>
<head>
<title>Template</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-icon.css"/>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-revise.css"/>
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>
<script type="text/javascript" src="../ext/ext-revise.js"></script>
<script type="text/javascript" src="../ext/src/locale/ext-lang-zh_CN.js"></script>
</head>

<body>
<script type="text/javascript">
var form = new Ext.form.FormPanel({
	renderTo: Ext.getBody(),
	frame: true,
	items: [{
		fieldLabel: "Label",
		xtype: "label",
		html: "<a href='http://www.baidu.com?tn=news' target='_blank'>Baidu</a>"
	}, {
		fieldLabel: "Field",
		xtype: "field",
		name: "Field"
	}, {
        fieldLabel: "TextField",
	    xtype: "textfield",
	    name: "TextField"
	}, {
		fieldLabel: "NumberField",
		xtype: "numberfield",
		name: "NumberField"
	}, {
	    fieldLabel: "Radio",
        xtype: "panel",
        layout: "table",
        defaults: {
            style: "margin-left:20px"
        },
	    items: [{
            xtype: "radio",
            name: "Radio",
            style: "margin-left:0",
            boxLabel: "America",
            inputValue: "america"
	    }, {
            xtype: "radio",
            name: "Radio",
            boxLabel: "China",
            inputValue: "china"
        }]
	}, {
        fieldLabel: "Checkbox",
        xtype: "panel",
        layout: "table",
        defaults: {
            style: "margin-left:20px"
        },
        items: [{
            xtype: "checkbox",
            style: "margin-left:0",
            boxLabel: "Plain",
            name: "Flavor",
            inputValue: "plain"
        }, {
            xtype: "checkbox",
            boxLabel: "Peppery",
            name: "Flavor",
            inputValue: "peppery"
        }]
    }, {
    	fieldLabel: "ComboBox",
    	xtype: "combo",
    	hiddenName: "ComboBox",
        editable: false,
    	store: new Ext.data.SimpleStore({
    		fields: ["value", "text"],
    		data: [["music", "Music"], ["dance", "Dance"]]
    	}),
    	mode: "local",
    	valueField: "value",
    	displayField: "text",
    	triggerAction: "all"
    }, {
    	fieldLabel: "DateField",
    	xtype: "datefield",
    	name: "DateField",
    	format: "Y-m-d"
    }, {
    	fieldLabel: "TimeField",
    	xtype: "timefield",
    	name: "TimeField",
    	minValue: "9:00 AM",
    	maxValue: "18:00 PM",
    	increment: 60,
    	format: "G:i"
    }, {
    	fieldLabel: "TriggerField",
    	xtype: "trigger",
    	name: "TriggerField",
    	editable: false,
    	onTriggerClick: function(o) {
    		new Ext.Window({
    			title: "Tigger Click Window",
    			modal: true,
    			width: 300,
    			height: 150
    		}).show();
    	}
    }, {
    	fieldLabel: "TextArea",
    	xtype: "textarea",
    	name: "TextArea",
    	height: 30
    }, {
    	fieldLabel: "HtmlEditor",
    	xtype: "htmleditor",
    	name: "HtmlEditor",
    	height: 70
    }, {
    	fieldLabel: "FieldSet",
    	xtype: "fieldset",
    	title: "Simple FieldSet",
    	buttons: [{
    		text: "Send Information",
    		handler: function() {
    			if (form.getForm().isValid()) {
    				var value = Ext.encode(form.getForm().getValues());
    				value = value.replace(/^\{|\}$/g, "").replace(/("\w+":(\[.*\])|("[\w:-]*")),/g, "$1<br>");
    				Ext.Msg.alert("Information", value);
    			}
    		}
    	}]
    }]
});

Ext.onReady(function() {
	//Ext.Msg.alert("Message", "It's OK.");
});
</script>
</body>
</html>
